<!--
  Copyright 2012-2019 the original author or authors.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<div class="gt-header">
  <div class="gt-header-lhs"
       ng-if="!layout.central && !layout.embeddedAgentRollup.display">
    <h1 class="gt-header-text">
      Configuration
    </h1>
  </div>
  <!-- ng-show needed here instead of ng-if because config.js binds directly to #topLevelAgentRollupDropdown -->
  <div class="gt-header-lhs"
       ng-show="layout.central || layout.embeddedAgentRollup.display">
    <!-- ng-show needed here instead of ng-if because config.js binds directly to #topLevelAgentRollupDropdown -->
    <div class="gt-header-menu"
         ng-show="layout.central">
      <select gt-selectpicker
              gt-title="agentRollup.topLevelDisplay || '&amp;lt;select&amp;gt;'"
              data-width="fit"
              data-live-search="true"
              data-style="btn-secondary"
              id="topLevelAgentRollupDropdown"
              aria-label="Agent">
        <option ng-repeat="item in topLevelAgentRollups track by item.id"
                data-href="{{agentRollupUrl(item.id)}}"
                data-tokens="{{item.display}}"
                value="{{item.id}}"
                ng-disabled="item.disabled"
                ng-selected="item.id == agentRollup.topLevelId">
          {{item.display}}
        </option>
        <option disabled
                class="gt-top-level-agent-rollup-dropdown-message d-none"
                style="font-style: italic; font-size: 1rem; cursor: inherit;"
                ng-if="topLevelAgentRollups.length === 0">
          No active agents in the past 7 days
        </option>
        <!-- can't use gt-spinner due to selectpicker behavior -->
        <option disabled
                class="gt-top-level-agent-rollup-dropdown-spinner d-none"
                style="position: relative; height: 30px; cursor: inherit;">
        </option>
      </select>
      <!-- ng-show needed here instead of ng-if because transaction.js binds directly to #childAgentRollupDropdown -->
      <!-- also important, ng-show is not on select directly, so that it will apply right away to the selectpicker which
           is added as a sibling of select, instead of having to wait for selectpicker('refresh') which can cause a
           slight jitter -->
      <span ng-show="showChildAgentRollupDropdown()">
        <select gt-selectpicker
                gt-title="agentRollup.childDisplay"
                data-width="fit"
                data-live-search="true"
                data-style="btn-secondary"
                id="childAgentRollupDropdown"
                aria-label="Child agent">
          <option data-href="{{agentRollupUrl(agentRollup.topLevelId)}}"
                  data-tokens="Rollup"
                  value="{{agentRollup.topLevelId}}"
                  ng-selected="agentRollup.topLevelId == agentRollup.id">
            Rollup
          </option>
          <option data-divider="true">
          </option>
          <option ng-repeat="item in childAgentRollups track by item.id"
                  data-href="{{agentRollupUrl(item.id)}}"
                  data-tokens="{{item.display}}"
                  value="{{item.id}}"
                  title="{{item.display}}"
                  ng-disabled="item.disabled"
                  ng-selected="item.id == agentRollup.id">
            {{item.indentedDisplay}}
          </option>
          <option disabled
                  class="gt-child-agent-rollup-dropdown-message d-none"
                  style="font-style: italic; font-size: 1rem; cursor: inherit;"
                  ng-if="childAgentRollups.length === 0">
            No active agents in the past 7 days
          </option>
          <!-- can't use gt-spinner due to selectpicker behavior -->
          <option disabled
                  class="gt-child-agent-rollup-dropdown-spinner d-none"
                  style="position: relative; height: 30px; cursor: inherit;">
          </option>
        </select>
      </span>
    </div>
    <div class="gt-header-text"
         ng-if="layout.embeddedAgentRollup.display">
      {{layout.embeddedAgentRollup.display}}
    </div>
    <!-- don't use border to simulate vertical bar since this will jitter on reload (at least in Chrome)
         while chrome guesses the placement of the border based on default font and then it moves slightly
         once font is available -->
    <div class="gt-header-text gt-separator">
      |
    </div>
    <h1 class="gt-header-text">
      Configuration
    </h1>
  </div>
</div>
<div class="gt-sidebar hidden-print">
  <div class="card">
    <div class="list-group">
      <div gt-sidebar-item
           gt-display="General"
           gt-url="config/general{{agentQueryString()}}"
           gt-active="currentUrl() === 'config/general'"
           ng-if="layout.central">
      </div>
      <div gt-sidebar-item
           gt-display="Transactions"
           gt-url="config/transaction{{agentQueryString()}}"
           gt-active="currentUrl() === 'config/transaction'"
           ng-if="!isAgentRollup()">
      </div>
      <div gt-sidebar-item
           gt-display="Gauges"
           gt-url="config/gauge-list{{agentQueryString()}}"
           gt-active="currentUrl() === 'config/gauge-list'"
           gt-sub-active="currentUrl() === 'config/gauge'"
           ng-if="!isAgentRollup()">
      </div>
      <div gt-sidebar-item
           gt-display="JVM"
           gt-url="config/jvm{{agentQueryString()}}"
           gt-active="currentUrl() === 'config/jvm'"
           ng-if="!isAgentRollup()">
      </div>
      <div gt-sidebar-item
           gt-display="Synthetic monitors"
           gt-url="config/synthetic-monitor-list{{agentQueryString()}}"
           gt-active="currentUrl() === 'config/synthetic-monitor-list'"
           gt-sub-active="currentUrl() === 'config/synthetic-monitor'"
           ng-if="layout.central">
      </div>
      <div gt-sidebar-item
           gt-display="Alerts"
           gt-url="config/alert-list{{agentQueryString()}}"
           gt-active="currentUrl() === 'config/alert-list'"
           gt-sub-active="currentUrl() === 'config/alert'">
      </div>
      <div gt-sidebar-item
           gt-display="UI Defaults"
           gt-url="config/ui-defaults{{agentQueryString()}}"
           gt-active="currentUrl() === 'config/ui-defaults'">
      </div>
      <div gt-sidebar-item
           gt-display="Plugins"
           gt-url="config/plugin-list{{agentQueryString()}}"
           gt-active="currentUrl() === 'config/plugin-list'"
           gt-sub-active="currentUrl() === 'config/plugin'"
           ng-if="!isAgentRollup()">
      </div>
      <div gt-sidebar-item
           gt-display="Instrumentation"
           gt-url="config/instrumentation-list{{agentQueryString()}}"
           gt-active="currentUrl() === 'config/instrumentation-list'"
           gt-sub-active="currentUrl() === 'config/instrumentation'"
           ng-if="!isAgentRollup()">
      </div>
      <div gt-sidebar-item
           gt-display="Advanced"
           gt-url="config/advanced{{agentQueryString()}}"
           gt-active="currentUrl() === 'config/advanced'">
      </div>
    </div>
  </div>
  <div class="card mt-4"
       ng-if="!isAgentRollup()">
    <div class="list-group">
      <div gt-sidebar-item
           gt-display="config.json"
           gt-url="config/json{{agentQueryString()}}"
           gt-active="currentUrl() === 'config/json'">
      </div>
    </div>
  </div>
</div>
<div ui-view class="gt-main-column">
</div>
